<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }

    </style>
    <script type="text/javascript">

    $(function () {
        $('#newNav').click(function(){
            window.location.href="addUser.html?pageSize=" + globalPageSize + "&pageNum=" + globalPageNum;
        });
        // 分页查询
        queryList(globalPageNum);
    });

    // 用户名模糊查
    function queryNameLike(){
        queryList(1)
    }
    queryList = function(pageNum){
        let uLoginName = $("#username").val().trim()
        layer.load(0)
        $.ajax({
            type: "GET",
            url: origin + "/user/list",
			xhrFields: {
			   withCredentials: true
			},
			crossDomain: true,
            data: {pageNum:pageNum,pageSize:globalPageSize,uLoginName:uLoginName,jwtToken:jwtToken},
            success: function (data) {
                layer.closeAll()
                if(data.code === 200){
                    // 更新全局分页参数
                    globalPageSize = data.obj.pageSize;
                    globalPageNum = data.obj.pageNum;
                    // 填充分页
                    fillPageData(data.obj);
                    // 填充内容
                    fillContent(data.obj);
                    $("#checkall").removeAttr("checked");
                }else{
                    layer.msg(data.msg, function(){});
                }
            }
            ,complete : function(xhr, status) {
                myComplete(xhr, status);
            }
        });
    }

    // 修改用户state
    function updateState(uId, uState){
        if(uState == 0){
            uState = 1;
        }else{
            uState = 0;
        }
        layer.load(0)
        $.ajax({
            type: "POST",
            url: origin + "/user/" + uId,
			xhrFields: {
			   withCredentials: true
			},
			crossDomain: true,
            data: {uState:uState,_method:"PUT",jwtToken:jwtToken},
            dataType: "json",
            success: function (data) {
                layer.closeAll()
                if (data.code == 200){
                    if(uState == 0){
                        layer.msg("启用成功")
                        $("#uid_"+ uId).text("启用")
                    }else{
                        layer.msg("已禁用")
                        $("#uid_"+ uId).text("禁用")
                    }
                    $("#uid_"+ uId).attr("onclick","")
                    $("#uid_"+ uId).attr("onclick","updateState("+ uId +","+ uState +")")
                }else{
                    layer.msg(data.msg,function(){})
                }
            },
            complete : function(xhr, status) {
                myComplete(xhr, status);
            }
        })
    }

    // 填充内容,自行修改
     function fillContent(pageInfo){
         $(".con-box").empty();
         $("#mycon").find("tbody").empty()
         $.each(pageInfo.list, function(){
             let ustate = this.uState==0?'启用':'禁用'
             let con = "<tr>\n" +
                 "             <td style='vertical-align:middle;'><input type='checkbox' name='check' value='"+ this.uId +"'></td>\n" +
                 "             <td>"+ this.uLoginName +"</td>\n" +
                 "             <td>"+ this.uTrueName +"</td>\n" +
                 "             <td>"+ this.role.rName +"</td>\n" +
                 "             <td><a id='uid_"+ this.uId +"' onclick='updateState("+ this.uId +", "+ this.uState +")' href='javascript:void(0);'>"+ ustate +"</a></td>\n" +
                 "             <td>\n" +
                 "                 <a href='editUser.html?pageNum="+ pageInfo.pageNum +"&pageSize="+ pageInfo.pageSize +"&uId="+ this.uId +"'>编辑</a>&nbsp;&nbsp;&nbsp;<a href='javascript:deleteUserById("+this.uId+");'>删除</a>\n" +
                 "             </td>\n" +
                 "         </tr>"
             $("#mycon").find("tbody").append($(con))
         })
     }

     // 删除用户
     function deleteUserById(uId){
        if(confirm("确认删除?")){
            layer.load(0);
            $.ajax({
                type: "POST",
                url: origin + "/user/"+ uId,
				xhrFields: {
				   withCredentials: true
				},
				crossDomain: true,
                data: {_method:"DELETE",jwtToken:jwtToken},
                success: function (data) {
                    layer.closeAll();
                    if(data.code === 204){
                        layer.msg("删除成功");
                        queryList(globalPageNum)     // 刷新页面
                    }else{
                        layer.msg(data.msg,function(){})
                    }
                }
                ,complete : function(xhr, status) {
                    myComplete(xhr, status);
                }
            });
        }
     }
     function checkall(){
        var alls=document.getElementsByName("check");
        var ch=document.getElementById("checkall");
        if(ch.checked){
            for(var i=0;i<alls.length;i++){
                alls[i].checked=true;
            }
        }else{
            for(var i=0;i<alls.length;i++){
                alls[i].checked=false;
            }
        }
    }
    // 批量删除用户
	function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}		
			}
			if(ids.length>0){
				if(confirm("确认删除?")){
                    layer.load(0);
                    $.each(ids, function(index,id){
                        $.ajax({
                            type: "POST",
                            url: origin + "/user/"+ id,
							xhrFields: {
							   withCredentials: true
							},
							crossDomain: true,
                            data: {_method:"DELETE",jwtToken:jwtToken},
                            success: function (data) {
                                layer.closeAll();
                                if(data.code === 204){
                                    if(index === ids.length-1){
                                        layer.msg("删除成功");
                                        queryList(globalPageNum)     // 刷新页面
                                    }
                                }else{
                                    layer.msg(data.msg,function(){})
                                }
                            }
                            ,complete : function(xhr, status) {
                                myComplete(xhr, status);
                            }
                        });
                    })
                    return false;
				}
			}else{
				alert("请选中要删除的项");
			}
		}
    </script>
</head>
<body>
<form class="form-inline definewidth m20" >
    用户名称：
    <input type="text" name="username" id="username"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;  
    <button type="button" onclick="queryNameLike()" class="btn btn-primary">查询</button>
</form>
<table id="mycon" class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>用户账户</th>
        <th>真实姓名</th>
        <th>角色</th>
        <th>状态</th>
        <th  width="10%">操作</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<table class="table table-bordered table-hover definewidth m10" >
  	<tr><th colspan="5">
        <div id="pageInfo-box" class="inline pull-right page">
<!--            <span id="total"></span>条记录<span id="pages"></span>页<a id="nextPage" href="javascript:void(0)">下一页</a><span class='current'>1</span>-->
<!--            <a href='#'>2</a>-->
<!--            <a href='#'>3</a>-->
<!--            <a href='#'>4</a>-->
<!--            <a href='#'>5</a>-->
<!--            <a href='#' >下5页</a>-->
<!--            <a href='#' >最后一页</a>-->
        </div>
        <div>
            <button type="button" class="btn btn-success" id="newNav">添加用户</button>&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button></div></th></tr>
  </table>
</body>
</html>